In the series of learning apache Cordova framework using node.js, this article is another step in forward direction that explains the ways to store data in an app.

Also Read: Introduction to Apache Cordova

You can use storage APIs that are available for storing data on the client apps. This will be helpful for the app when the user is offline and also for improving performance of the app. You will be able to know how to store data in an app, also you will learn about the plugins you can use, in our next article posts.

So, here are the steps, for how can you store data:

Step 1 - Adding Buttons

You will have to create four buttons in index.html file. The buttons must be placed inside div class = "app" element.

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
 



<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
 



<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button

 



<button id = "getLocalStorageByKey">GET BY KEY</button>Local Storage Buttons

Step 2 - Adding Event Listeners

You have to add event listeners inside the index.js files as Cordova’s security policy doesn't allow inline events. We will also assign window.localStorage to a localStorage variable that we will use later.

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage);



document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage);



document.getElementById("removeProjectFromLocalStorage").addEventListener



   ("click", removeProjectFromLocalStorage);



document.getElementById("getLocalStorageByKey").addEventListener



   ("click", getLocalStorageByKey);



                                                    



var localStorage = window.localStorage;       

 Step 3 - Creating Functions

Now, you will need to create the functions that will be called when the buttons are tapped upon. First function is used for adding data to local storage.

function setLocalStorage() {



   localStorage.setItem("Name", "John");



   localStorage.setItem("Job", "Developer");



   localStorage.setItem("Project", "Cordova Project");



}

function showLocalStorage() {



   console.log(localStorage.getItem("Name"));



   console.log(localStorage.getItem("Job"));



   console.log(localStorage.getItem("Project"));



}   

function removeProjectFromLocalStorage() {



   localStorage.removeItem("Project");



}

function getLocalStorageByKey() {



   console.log(localStorage.key(0));



}